<!--
 * @Description: 编辑积分活动
 * @Author: xiao li
 * @Date: 2021-10-29 09:38:17
 * @LastEditTime: 2022-02-14 16:09:51
 * @LastEditors: xiao li
-->

<template>
  <div class="lb-goods-edit-bargain">
    <top-nav :title="navTitle" :isBack="true" />
    <div class="page-main">
      <div style="height: 40px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        ref="subForm"
        :rules="subFormRules"
        label-width="120px"
      >
        <el-form-item label="活动类型" prop="goods_type">
          <el-radio-group
            @change="toChangeType"
            :disabled="subForm.id"
            v-model="subForm.goods_type"
          >
            <el-radio :label="1">商品</el-radio>
            <el-radio :label="2">卡券</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="subForm.goods_type === 1 ? '活动商品' : '活动卡券'"
          prop="goods_id"
        >
          <el-tag
            :type="atv_status > 1 ? 'info' : ''"
            @click="getTableDataList(1)"
            style="cursor: pointer"
            >{{
              cur_info.name
                ? cur_info.name
                : subForm.goods_type === 1
                ? '请选择活动商品'
                : '请选择活动卡券'
            }}</el-tag
          >
        </el-form-item>
        <el-form-item label="兑换条件" prop="goods_info">
          <el-tag
            @click="showSpecList"
            :type="atv_status > 1 ? 'info' : ''"
            class="mb-lg"
            style="cursor: pointer"
            v-if="subForm.goods_type === 1 && isLoad"
            >请选择商品规格</el-tag
          >
          <el-table
            :data="multipleSelection"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            style="width: 1000px"
            ref="multipleTable"
            @selection-change="handleBacthSelectionChange"
            v-show="subForm.goods_type === 1"
          >
            <el-table-column
              type="selection"
              width="55"
              :selectable="selectable"
              v-if="atv_status < 3"
            ></el-table-column>
            <el-table-column
              prop="spe_id"
              label="ID"
              width="80"
              fixed
            ></el-table-column>
            <el-table-column
              prop="spe_name"
              label="规格"
              width="250"
            ></el-table-column>

            <el-table-column prop="goods_stock" label="库存"></el-table-column>
            <el-table-column prop="goods_price" label="原价">
              <template slot-scope="scope">
                <div>¥{{ scope.row.goods_price }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="have_stock"
              label="已兑换数量"
              width="100"
            ></el-table-column>
            <el-table-column prop="stock" label="可兑换数量" width="140">
              <template slot-scope="scope">
                <el-input-number
                  :disabled="atv_status > 2"
                  size="small"
                  v-model="scope.row.stock"
                  :precision="0"
                  :controls="false"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="兑换价" width="300">
              <template slot-scope="scope">
                <div class="flex-y-center f-caption c-title">
                  <el-input-number
                    :disabled="atv_status > 2"
                    size="small"
                    v-model="scope.row.integral"
                    :controls="false"
                    :precision="0"
                    :min="1"
                    :max="99999"
                  ></el-input-number>
                  <div class="ml-sm mr-sm">积分 +</div>
                  <el-input-number
                    :disabled="atv_status > 2"
                    size="small"
                    v-model="scope.row.price"
                    :controls="false"
                    :precision="2"
                    :min="0"
                    :max="scope.row.goods_price"
                  ></el-input-number>
                  <div class="ml-sm">元</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="multipleSelection"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            style="width: 1000px"
            ref="multipleTable"
            @selection-change="handleBacthSelectionChange"
            v-show="subForm.goods_type === 2"
          >
            <el-table-column
              type="selection"
              width="55"
              :selectable="selectable"
              v-if="atv_status < 3"
            ></el-table-column>
            <el-table-column
              prop="spe_id"
              label="ID"
              width="80"
              fixed
            ></el-table-column>
            <el-table-column prop="spe_name" label="规格"></el-table-column>
            <el-table-column
              prop="have_stock"
              label="已兑换数量"
            ></el-table-column>
            <el-table-column prop="stock" label="可兑换数量">
              <template slot-scope="scope">
                <el-input-number
                  :disabled="atv_status > 2"
                  size="small"
                  v-model="scope.row.stock"
                  :precision="0"
                  :controls="false"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="兑换价">
              <template slot-scope="scope">
                <div class="flex-y-center f-caption c-title">
                  <el-input-number
                    :disabled="atv_status > 2"
                    size="small"
                    v-model="scope.row.integral"
                    :controls="false"
                    :precision="0"
                    :max="99999"
                    :min="1"
                  ></el-input-number>
                  <div class="ml-sm mr-sm">积分</div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <lb-page
            :isShowPage="false"
            :selected="batchMultipleSelection.length"
            v-if="atv_status < 3"
          >
            <lb-button size="mini" type="primary" @click="batchUpperAndDel(1)"
              >兑换数量</lb-button
            >
            <lb-button size="mini" type="danger" @click="batchUpperAndDel(2)"
              >兑换价</lb-button
            >
          </lb-page>
        </el-form-item>
        <el-form-item label="活动时间" prop="range">
          <el-date-picker
            v-model="range"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="timestamp"
            :disabled="atv_status > 1"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="兑换限制" prop="user_limit">
          <el-input-number
            :disabled="atv_status > 2"
            class="lb-input-number"
            style="width: 300px"
            v-model="subForm.user_limit"
            :controls="false"
            :precision="0"
            :min="1"
            placeholder="请输入兑换限制数量"
          ></el-input-number>
          <block> {{ subForm.goods_type === 1 ? '件' : '张' }}/人</block>
          <lb-tool-tips>每人参与兑换的数量</lb-tool-tips>
        </el-form-item>
        <el-form-item label="购买限制" prop="" v-if="subForm.goods_type === 1">
          <el-checkbox-group
            :disabled="atv_status > 2"
            @change="changeCheckBox($event, 'authPriceList')"
            v-model="checkPriceList"
          >
            <div
              v-for="(item, index) in authPriceList"
              :key="index"
              :style="{
                display: 'inline-block',
                marginLeft: index === 0 ? 0 : '15px'
              }"
            >
              <el-checkbox :label="item.title"></el-checkbox>
              <lb-tool-tips v-if="item.tips">{{ item.tips }}</lb-tool-tips>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="优惠叠加" prop="" v-if="subForm.goods_type === 1">
          <el-checkbox-group
            :disabled="atv_status > 2"
            @change="changeCheckBox($event, 'authList')"
            v-model="checkList"
          >
            <div
              v-for="(item, index) in authList"
              :key="index"
              :style="{
                display: 'inline-block',
                marginLeft: index === 0 ? 0 : '15px'
              }"
            >
              <el-checkbox :label="item.title"></el-checkbox>
              <lb-tool-tips v-if="item.tips">{{ item.tips }}</lb-tool-tips>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitInfo" v-if="atv_status < 3">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>

      <!-- 选择活动商品 -->
      <el-dialog
        title="选择活动商品"
        :visible.sync="showGoodsDialog[1]"
        width="800px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true"
        center
        v-if="subForm.goods_type === 1"
      >
        <el-form
          @submit.native.prevent
          :inline="true"
          :model="searchForm"
          ref="searchForm"
        >
          <el-form-item label="输入查询" prop="title">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <lb-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              style="margin-right: 5px"
              @click="getTableDataList(1)"
              >{{ $t('action.search') }}</lb-button
            >
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              style="margin-right: 5px"
              @click="resetForm('searchForm')"
              >{{ $t('action.reset') }}</lb-button
            >
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="goods_list"
          ref="singleTable"
          highlight-current-row
          @current-change="handleCurrentRow"
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="cover" label="封面图">
            <template slot-scope="scope">
              <lb-image :src="scope.row.cover" />
            </template>
          </el-table-column>
          <el-table-column prop="price_text" label="价格">
            <template slot-scope="scope">
              ¥{{ scope.row.price_text }}起
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存">
            <template slot-scope="scope">
              {{ scope.row.stock > 0 ? scope.row.stock : '暂无库存' }}
            </template>
          </el-table-column>
        </el-table>
        <lb-page
          :batch="false"
          :page="searchForm.page"
          :pageSize="searchForm.limit"
          :total="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        ></lb-page>

        <span slot="footer" class="dialog-footer">
          <el-button @click="showGoodsDialog[1] = false">取 消</el-button>
          <el-button type="primary" @click="submitGoodsDialogForm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="选择活动卡券"
        :visible.sync="showGoodsDialog[2]"
        width="800px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true"
        center
      >
        <el-form
          @submit.native.prevent
          :inline="true"
          :model="searchForm"
          ref="searchForm"
        >
          <el-form-item label="输入查询" prop="title">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入卡券名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <lb-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              style="margin-right: 5px"
              @click="getTableDataList(1)"
              >{{ $t('action.search') }}</lb-button
            >
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              style="margin-right: 5px"
              @click="resetForm('searchForm')"
              >{{ $t('action.reset') }}</lb-button
            >
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="goods_list"
          ref="singleTable"
          highlight-current-row
          @current-change="handleCurrentRow"
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="title" label="卡券名称"></el-table-column>
          <el-table-column prop="type_text" label="类型"> </el-table-column>
          <el-table-column prop="full" label="满">
            <template slot-scope="scope">
              <div v-if="scope.row.use_limit === 1">-</div>
              <div v-else>¥{{ scope.row.full }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="reduce" label="减">
            <template slot-scope="scope">
              <div v-if="scope.row.coupon_type === 0">
                ¥ {{ scope.row.reduce }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
        </el-table>
        <lb-page
          :batch="false"
          :page="searchForm.page"
          :pageSize="searchForm.limit"
          :total="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        ></lb-page>

        <span slot="footer" class="dialog-footer">
          <el-button @click="showGoodsDialog[2] = false">取 消</el-button>
          <el-button type="primary" @click="submitGoodsDialogForm"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 选择商品规格 -->
      <el-dialog
        title="选择商品规格"
        :visible.sync="showSpecDialog"
        width="1100px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true"
        center
      >
        <el-table
          v-loading="loading"
          :data="spec_list"
          ref="multipleTable"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="selectable"
          ></el-table-column>
          <el-table-column
            prop="spe_id"
            label="ID"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="spe_name"
            label="规格"
            width="250"
          ></el-table-column>
          <el-table-column prop="goods_stock" label="库存"></el-table-column>
          <el-table-column prop="goods_price" label="原价">
            <template slot-scope="scope">
              <div>¥{{ scope.row.goods_price }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="可兑换数量" width="140">
            <template slot-scope="scope">
              <el-input-number
                size="small"
                style="width: 100px"
                v-model="scope.row.stock"
                :controls="false"
                :precision="0"
                :min="1"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="兑换价" width="300">
            <template slot-scope="scope">
              <div class="flex-y-center f-caption c-title">
                <el-input-number
                  size="small"
                  style="width: 100px"
                  v-model="scope.row.integral"
                  :controls="false"
                  :precision="0"
                  :min="1"
                  :max="99999"
                ></el-input-number>
                <div class="ml-sm mr-sm">积分 +</div>
                <el-input-number
                  size="small"
                  style="width: 100px"
                  v-model="scope.row.price"
                  :controls="false"
                  :precision="2"
                  :min="0"
                  :max="scope.row.goods_price"
                ></el-input-number>
                <div class="ml-sm">元</div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
          <el-button @click="showSpecDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleSpecConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量设置 -->
      <el-dialog
        :title="batchDialogType === 1 ? '批量设置兑换数量' : '批量设置兑换价'"
        :visible.sync="showBatchDialog"
        width="500px"
        center
      >
        <el-form
          class="dialog-form"
          :model="batchForm"
          ref="stockForm"
          :rules="stockFormRules"
          label-width="100px"
          v-if="batchDialogType === 1"
        >
          <el-form-item label="可兑换数量" prop="stock">
            <el-input
              v-model="batchForm.stock"
              placeholder="请输入可兑换数量"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form
          class="dialog-form"
          :model="batchForm"
          ref="priceForm"
          :rules="priceFormRules"
          label-width="100px"
          v-if="batchDialogType === 2"
        >
          <el-form-item label="积分" prop="integral">
            <el-input
              v-model="batchForm.integral"
              maxlength="5"
              placeholder="请输入积分"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="价格"
            prop="price"
            v-if="subForm.goods_type === 1"
          >
            <el-input v-model="batchForm.price" placeholder="请输入价格">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showBatchDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitFormInfo">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  reg
} from '@/utils/reg'
export default {
  data () {
    let validateUserNum = (rule, value, callback) => {
      if (!/^\+?[0-9]*$/.test(value)) {
        callback(new Error('请输入兑换限制数量'))
      } else {
        callback()
      }
    }
    let validateRange = (rule, value, callback) => {
      if (!this.range) {
        callback(new Error('请选择活动时间'))
      } else {
        callback()
      }
    }
    let validateGoods = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.subForm.goods_type === 1 ? '请选择活动商品' : '请选择活动卡券'))
      } else {
        callback()
      }
    }
    let validateSpe = (rule, value, callback) => {
      if (this.multipleSelection.length < 1) {
        callback(new Error(this.subForm.goods_type === 1 ? '请选择商品规格' : '请选择活动卡券'))
      } else {
        callback()
      }
    }
    return {
      isLoad: false,
      navTitle: '',
      courseList: [],
      checkList: [],
      authList: [
        {
          title: '可叠加其他营销活动',
          key: 'discount_add',
          tips: '勾选“可叠加其他营销活动”，使用积分时可使用卡券优惠和会员折扣；若不勾选“可叠加其他营销活动”，则该活动商品所选规格仅参与本活动优惠'
        }
      ],
      checkPriceList: ['所选规格可原价购买'],
      authPriceList: [
        {
          title: '所选规格可原价购买',
          key: 'buy_limit'
        }
      ],
      range: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - (24 * 3600 * 1000)
        }
      },
      showGoodsDialog: { 1: false, 2: false },
      cur_info: {
        id: 0,
        name: ''
      },
      currentRow: {},
      searchForm: {
        page: 1,
        limit: 10,
        title: ''
      },
      goods_list: [],
      loading: false,
      total: 0,
      showSpecDialog: false,
      spec_list: [],
      multipleSelection: [],
      batchMultipleSelection: [],
      showBatchDialog: false,
      batchDialogType: 1,
      batchForm: {
        stock: '',
        integral: '',
        price: ''
      },
      stockFormRules: {
        stock: { required: true, validator: reg.isNum, text: '可兑换数量', trigger: 'blur' }
      },
      priceFormRules: {
        integral: { required: true, validator: reg.isNum, text: '积分', trigger: 'blur' },
        price: { required: true, validator: reg.isMoney, text: '价格', trigger: 'blur' }
      },
      selectable (row, index) {
        if (row.stock > 0) {
          return true
        } else {
          return false
        }
      },
      atv_status: 1,
      subForm: {
        id: 0,
        goods_type: 1,
        goods_id: '',
        goods_info: [],
        start_time: '',
        end_time: '',
        buy_limit: 1,
        discount_add: 0,
        user_limit: 1,
        status: 1
      },
      subFormRules: {
        goods_type: { required: true, type: 'number', message: '请选择活动类型', trigger: 'blur' },
        goods_id: { required: true, validator: validateGoods, trigger: 'blur' },
        stock: { required: true, type: 'number', message: '请输入所选规格的库存', trigger: 'blur' },
        goods_info: { required: true, validator: validateSpe, trigger: 'blur' },
        range: { required: true, validator: validateRange, trigger: 'blur' },
        user_limit: { required: true, validator: validateUserNum, trigger: 'blur' }
      }
    }
  },
  async created () {
    let { id } = this.$route.query
    if (id) {
      this.subForm.id = id
      await this.getDetail()
    }
    this.isLoad = true
    this.navTitle = this.$t(id ? 'menu.IntegralEdit' : 'menu.IntegralAdd')
  },
  methods: {
    /**
     * @method: 活动详情
     */
    async getDetail () {
      let { id } = this.subForm
      let { code, data } = await this.$api.integral.integralInfo({ id })
      if (code !== 200) return
      let checkItem = []
      this.authList.map(item => {
        if (data[item.key] === 1) {
          checkItem.push(item.title)
        }
      })
      this.checkList = checkItem

      let checkPrice = []
      this.authPriceList.map(item => {
        if (data[item.key] === 1) {
          checkPrice.push(item.title)
        }
      })
      this.checkPriceList = checkPrice
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
      this.range = [data.start_time * 1000, data.end_time * 1000]
      this.cur_info = {
        id: data.goods_id,
        name: data.goods_name
      }

      this.multipleSelection = data.goods_info
      this.atv_status = data.atv_status
    },
    resetForm (form) {
      this.$refs[form].resetFields()
      this.getTableDataList(1)
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    },
    /**
     * @method: 商品列表
     */
    async getTableDataList (flag) {
      if (flag) {
        this.searchForm.page = 1
        if (this.atv_status > 1) return
      }
      let searchForm = JSON.parse(JSON.stringify(this.searchForm))
      let { goods_type: type } = this.subForm
      if (type === 2) {
        searchForm.send_type = 2
      }
      this.loading = true
      let methodModel = type === 1 ? 'getBaseGoodsSelect' : 'getBaseCouponSelect'
      let { code, data } = await this.$api[methodModel](searchForm)
      this.loading = false
      if (code !== 200) return
      this.goods_list = data.data
      this.total = data.total
      this.showGoodsDialog[type] = true
    },
    /**
     * @method: 规格列表
     */
    async getSpecList () {
      let { goods_id: gid } = this.subForm
      if (!gid) {
        this.$message.error(`请选择活动商品`)
        return
      }
      let { code, data } = await this.$api.getBaseGoodsSpeList({ goods_id: gid })
      this.loading = false
      if (code !== 200) return
      data.price.map(item => {
        item.spe_id = item.true_id
        item.spe_name = item.title
        item.goods_price = (item.price * 1).toFixed(2)
        item.have_stock = 0
        item.price = (item.price * 1).toFixed(2)
        item.stock = item.stock * 1
        item.goods_stock = item.stock
        item.integral = 0.01
        this.multipleSelection.map(aitem => {
          if (aitem.spe_id === item.spe_id) {
            item.have_stock = aitem.have_stock
            item.price = aitem.price
            item.stock = aitem.stock
            item.integral = aitem.integral
          }
        })
      })
      this.spec_list = data.price
      this.showSpecDialog = true
    },
    /**
     * @name: 切换活动类型
     * @param {*}
     */
    toChangeType () {
      this.cur_info = { id: 0, name: '' }
      this.subForm.goods_id = 0
      this.subForm.goods_info = []
      this.multipleSelection = []
    },
    /**
     * @method: 商品-单选
     * @param {*} e
     */
    handleCurrentRow (e) {
      this.currentRow = e
    },
    /**
     * @method: 关联商品-确定
     */
    submitGoodsDialogForm () {
      let { goods_type: type } = this.subForm
      let { id = 0, name = '', title = '', stock = 0 } = this.currentRow
      if (!id) {
        this.$message.error(type === 1 ? `请选择活动商品` : `请选择活动卡券`)
        return
      }
      if (type === 1 && !stock) {
        this.$message.error(`此商品暂无库存，请选择其他商品`)
        return
      }
      this.cur_info = { id, name: type === 1 ? name : title }
      this.subForm.goods_id = id
      this.currentRow = {}
      if (this.multipleSelection.length > 0 && id !== this.multipleSelection[0].goods_id) {
        this.multipleSelection = []
      }
      if (type === 2) {
        this.multipleSelection = [{
          spe_id: id,
          spe_name: title,
          have_stock: 0,
          stock: 1,
          integral: 0.01,
          price: 0
        }]
      }
      this.showGoodsDialog[type] = false
    },
    /**
     * @method: 打开规格弹窗
     */
    async showSpecList () {
      if (this.atv_status > 1) return
      await this.getSpecList()
      let arr = []
      this.multipleSelection.map((item) => {
        arr.push(item.spe_id)
      })
      this.spec_list.map((item) => {
        if (arr.includes(item.spe_id)) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        }
      })
    },
    /**
     * @method: 规格-多选
     * @param {*} val
     */
    handleSelectionChange (val) {
      let arr = []
      val.map((item) => {
        arr.push(item.spe_id)
      })
      this.spec_list.map((bitem, bindex) => {
        this.spec_list[bindex].check = false
        if (arr.includes(bitem.spe_id)) {
          this.spec_list[bindex].check = true
        }
      })
    },
    /**
     * @method: 关联规格-确定
     */
    handleSpecConfirm () {
      let data = []
      this.spec_list.map((item) => {
        if (item.check) {
          item.goods_id = this.subForm.goods_id
          data.push(item)
        }
      })
      if (!this.subForm.id) {
        if (this.multipleSelection.length > 0 && data.length < 1) {
          this.$confirm(`当前无选择规格，请确认是否要清空选项？`, this.$t('tips.reminder'), {
            confirmButtonText: this.$t('action.comfirm'),
            cancelButtonText: this.$t('action.cancel'),
            type: 'warning'
          }).then(() => {
            this.multipleSelection = data
            this.showSpecDialog = false
          }).catch(() => {
          })
        } else {
          this.multipleSelection = data
          this.showSpecDialog = false
        }
      } else {
        if (data.length < 1) {
          this.$message.error(`请选择商品规格`)
          return
        }
        this.multipleSelection = data
        this.showSpecDialog = false
      }
    },
    /**
     * @method: 多选框
     * @param {*} e
     * @param {*} key
     */
    changeCheckBox (e, key) {
      this[key].map(item => {
        this.subForm[item.key] = e.includes(item.title) ? 1 : 0
      })
    },
    /**
     * @name: 批量设置
     * @param {*} type
     */
    batchUpperAndDel (type) {
      let { batchMultipleSelection } = this
      if (batchMultipleSelection.length > 0) {
        this.batchForm = { stock: '', integral: '', price: '' }
        this.showBatchDialog = true
        this.batchDialogType = type
      } else {
        this.$message.error('请选择要操作的数据')
      }
    },
    handleBacthSelectionChange (val) {
      this.batchMultipleSelection = val
    },
    /**
     * @name: 确认 批量设置
     * @param {*}
     */
    async submitFormInfo () {
      let flag = true
      let { batchDialogType, batchMultipleSelection } = this
      let form = batchDialogType === 1 ? 'stockForm' : 'priceForm'
      this.$refs[`${form}`].validate(valid => {
        if (!valid) flag = false
      })
      if (flag) {
        let { stock, integral, price } = this.batchForm
        let result = batchMultipleSelection.map(item => {
          if (batchDialogType === 1) {
            item.stock = stock
          } else {
            item.integral = integral
            item.price = price
          }
          return item
        })
        this.batchMultipleSelection = result
        this.showBatchDialog = false
      }
    },
    /**
     * @method: 新增/编辑
     */
    submitInfo () {
      let flag = true
      this.$refs['subForm'].validate(valid => {
        if (!valid) flag = false
      })
      if (flag) {
        let subForm = JSON.parse(JSON.stringify(this.subForm))
        let { range = '' } = this
        if (range) {
          subForm.start_time = range[0] / 1000
          subForm.end_time = range[1] / 1000
        }

        if (subForm.start_time === subForm.end_time) {
          this.$message.error(`活动结束时间必须大于活动开始时间`)
          return
        }

        for (let key in this.multipleSelection) {
          let index = key * 1 + 1
          let { have_stock: haveStock, stock, price, integral } = this.multipleSelection[key]
          if (subForm.goods_type === 1 && haveStock > stock) {
            this.$message.error(`兑换条件 第${index}条数据：可兑换数量不能小于已兑换数量`)
            return
          }
          if (!stock) {
            this.$message.error(`兑换条件 第${index}条数据：请输入可兑换数量`)
            return
          }
          if (!/^\+?[0-9]*$/.test(integral)) {
            this.$message.error(`兑换条件 第${index}条数据：请输入兑换积分`)
            return
          }
          if (subForm.goods_type === 1 && !/^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(price)) {
            this.$message.error(`兑换条件 第${index}条数据：请输入正确的兑换金额，最多保留两位小数`)
            return
          }
        }

        let specs = []
        this.multipleSelection.map(item => {
          specs.push({ spe_id: item.spe_id, stock: item.stock, price: item.price, integral: item.integral })
        })

        subForm.goods_info = specs
        let modelMethod = subForm.id ? 'integralUpdate' : 'integralAdd'
        this.$api.integral[modelMethod](subForm).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t(subForm.id ? 'tips.successRev' : 'tips.successSub'))
            this.$router.back(-1)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-goods-edit-bargain {
  width: 100%;
  .page-main {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 24px;
        .el-select,
        .el-input {
          width: 300px;
        }
        .el-input-number {
          width: 100px;
        }
      }
    }
  }
}
</style>
